<template>
  <div>
    <h2>About Page:路由传参</h2>
    <ul>
      <li v-for="msg in messages" :key="msg.id">
        <!-- query参数 -->
        <!-- <router-link :to="`/router/about/message?id=${msg.id}&title=${msg.content}`">
                    {{msg.content}}
                </router-link> -->
        <!-- query参数 object-->
        <router-link
          :to="{
            name: 'messagePage', //如果路径太长，可以用这个name来写路径，但是要rotuer里配置一下！
            query: {
              id: msg.id,
              title: msg.content,
            },
          }"
        >
          {{ msg.content }}
        </router-link>
        <!-- params 参数 -->
        <!-- <router-link :to="`/router/about/message/${msg.id}`">
                    {{msg.content}}
                </router-link> -->
        <button @click="pushMode(msg)">push mode</button>
        <button @click="replaceMode(msg)">replace mode</button>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { id: 1, content: "Message 1" },
        { id: 2, content: "Message 2" },
        { id: 3, content: "Message 3" },
      ],
    };
  },
  beforeDestroy() {
    console.log("About will be destroied...");
  },
  beforeRouteEnter(to, from, next) {
    next();
  },
  beforeRouteLeave(to, from, next) {
    next();
  },
  methods: {
    pushMode(msg) {
      console.log(this.$router);
      this.$router.push({
        name: "messagePage", //如果路径太长，可以用这个name来写路径，但是要rotuer里配置一下！
        query: {
          id: msg.id,
          title: msg.content,
        },
      });
    },
    replaceMode(msg) {
      console.log(this.$router);
      this.$router.replace({
        name: "messagePage", //如果路径太长，可以用这个name来写路径，但是要rotuer里配置一下！
        query: {
          id: msg.id,
          title: msg.content,
        },
      });
    },
  },
};
</script>

<style scoped></style>
